<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>海岛能源调度平台 - 能源预测</title>
  <link rel="icon" href="data:,">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.0/nouislider.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.0/nouislider.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  <style>
    :root {
      --primary: #2c6fbb;
      --primary-light: #4a8dd9;
      --secondary: #28a745;
      --accent: #ff7e5f;
      --dark: #2d3748;
      --light: #f8f9fa;
      --gray: #718096;
      --card-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
      --transition: all 0.3s ease;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    body {
      background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
      color: var(--dark);
      min-height: 100vh;
      padding: 20px;
    }

    .container {
      max-width: 1400px;
      margin: 0 auto;
    }

    header {
      text-align: center;
      margin-bottom: 30px;
      padding: 20px;
      background: white;
      border-radius: 12px;
      box-shadow: var(--card-shadow);
    }

    .logo {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 15px;
      margin-bottom: 10px;
    }

    .logo i {
      font-size: 2.5rem;
      color: var(--primary);
    }

    h1 {
      font-size: 2.2rem;
      color: var(--primary);
      font-weight: 700;
      margin: 0;
    }

    .subtitle {
      font-size: 1.1rem;
      color: var(--gray);
      max-width: 600px;
      margin: 10px auto 0;
      line-height: 1.6;
    }

    .card {
      background: white;
      border-radius: 14px;
      box-shadow: var(--card-shadow);
      padding: 28px;
      margin-bottom: 30px;
      transition: var(--transition);
    }

    .card:hover {
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
    }

    .card-title {
      font-size: 1.5rem;
      color: var(--primary);
      margin-bottom: 22px;
      padding-bottom: 12px;
      border-bottom: 2px solid #eef2f7;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .card-title i {
      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
    }

    .input-section {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 25px;
      margin-bottom: 25px;
    }

    .input-group {
      display: flex;
      flex-direction: column;
    }

    .input-label {
      font-weight: 600;
      margin-bottom: 10px;
      color: var(--dark);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .input-label i {
      color: var(--primary);
    }

    .file-input-container {
      position: relative;
      border: 2px dashed #cbd5e0;
      border-radius: 10px;
      padding: 25px;
      text-align: center;
      transition: var(--transition);
      background: var(--light);
    }

    .file-input-container:hover {
      border-color: var(--primary);
      background: #f0f7ff;
    }

    .file-input-label {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 15px;
      cursor: pointer;
      color: var(--gray);
    }

    .file-input-label i {
      font-size: 2.5rem;
      color: var(--primary);
    }

    .file-input-label span {
      font-weight: 600;
      color: var(--primary);
    }

    #csv-file {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      opacity: 0;
      cursor: pointer;
    }

    #selected-file-name {
      margin-top: 15px;
      font-size: 0.9rem;
      color: var(--gray);
      font-style: italic;
    }

    .time-inputs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }

    .input-control {
      position: relative;
    }

    .input-control i {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--primary);
    }

    input, select {
      width: 100%;
      padding: 14px 20px 14px 45px;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      font-size: 1rem;
      transition: var(--transition);
      background: var(--light);
    }

    input:focus, select:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(44, 111, 187, 0.1);
    }

    .btn-primary {
      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
      color: white;
      border: none;
      padding: 15px 30px;
      font-size: 1.1rem;
      font-weight: 600;
      border-radius: 10px;
      cursor: pointer;
      transition: var(--transition);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
      box-shadow: 0 4px 10px rgba(44, 111, 187, 0.25);
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 15px rgba(44, 111, 187, 0.3);
      background: linear-gradient(135deg, var(--primary-light) 0%, #3a9cff 100%);
    }

    #loading-indicator {
      display: none;
      align-items: center;
      justify-content: center;
      gap: 15px;
      margin-top: 25px;
      padding: 20px;
      background: #f0f7ff;
      border-radius: 10px;
    }

    .spinner {
      border: 3px solid rgba(0, 0, 0, 0.1);
      border-radius: 50%;
      border-top: 3px solid var(--primary);
      width: 24px;
      height: 24px;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    #error-message {
      display: none;
      margin-top: 20px;
      padding: 18px;
      background-color: #ffeded;
      border-left: 4px solid #e53e3e;
      color: #c53030;
      border-radius: 8px;
      font-weight: 500;
    }

    .chart-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(550px, 1fr));
      gap: 30px;
      margin-top: 15px;
    }

    .chart-box {
      position: relative;
      background: white;
      border-radius: 12px;
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.05);
      padding: 20px;
      height: 480px;
      transition: var(--transition);
      display: flex;
      flex-direction: column;
    }

    .chart-box:hover {
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    }

    .chart-header {
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .chart-title {
      font-size: 1.3rem;
      font-weight: 600;
      color: var(--dark);
    }

    .chart-description {
      font-size: 0.9rem;
      color: var(--gray);
      margin-top: 5px;
    }

    .chart-wrapper {
      flex: 1;
      position: relative;
    }

    #forecast-chart, #components-chart {
      width: 100%;
      height: 100%;
    }

    .chart-resize-handle {
      position: absolute;
      right: 12px;
      bottom: 12px;
      width: 26px;
      height: 26px;
      background: var(--primary);
      border-radius: 6px;
      cursor: nwse-resize;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
      transition: var(--transition);
      z-index: 10;
    }

    .chart-resize-handle:hover {
      background: var(--primary-light);
      transform: scale(1.1);
    }

    .chart-resize-handle i {
      font-size: 0.9rem;
    }

    .range-controls-section {
      background: #f8fbff;
      border-radius: 12px;
      padding: 25px;
      border: 1px solid #e6f0fa;
    }

    .date-range-picker {
      display: grid;
      grid-template-columns: 1fr auto 1fr auto;
      gap: 15px;
      align-items: center;
      margin-bottom: 20px;
    }

    .date-range-label {
      font-weight: 600;
      color: var(--dark);
    }

    .date-input {
      padding: 12px 15px;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      background: white;
    }

    .btn-secondary {
      background: white;
      color: var(--primary);
      border: 1px solid var(--primary);
      padding: 10px 20px;
      border-radius: 8px;
      font-weight: 600;
      cursor: pointer;
      transition: var(--transition);
    }

    .btn-secondary:hover {
      background: var(--primary);
      color: white;
    }

    .slider-container {
      margin-top: 20px;
    }

    .slider-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      font-size: 0.9rem;
      color: var(--gray);
    }

    .noUi-target {
      background: #e2e8f0;
      border: none;
      box-shadow: none;
      height: 6px;
      border-radius: 3px;
    }

    .noUi-connect {
      background: linear-gradient(to right, var(--primary), var(--primary-light));
    }

    .noUi-handle {
      width: 22px;
      height: 22px;
      top: -8px;
      border: 3px solid var(--primary);
      background: white;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
      border-radius: 50%;
      cursor: grab;
    }

    .noUi-handle:after, .noUi-handle:before {
      display: none;
    }

    .footer {
      text-align: center;
      margin-top: 40px;
      padding: 20px;
      color: var(--gray);
      font-size: 0.9rem;
    }

    @media (max-width: 768px) {
      .chart-container {
        grid-template-columns: 1fr;
      }

      .date-range-picker {
        grid-template-columns: 1fr;
      }

      .time-inputs {
        grid-template-columns: 1fr;
      }
    }

    /* 修复隐藏类 */
    .hidden {
      display: none;
    }
  </style>
</head>
<body>
<div class="container">
  <!-- 页头 -->
  <header>
    <div class="logo">
      <i class="fas fa-bolt"></i>
      <h1>海岛能源调度平台</h1>
    </div>
    <p class="subtitle">利用先进的时间序列分析预测海岛能源需求，优化能源调度策略，降低运营成本</p>
  </header>

  <!-- 输入区域 -->
  <div class="card">
    <h2 class="card-title"><i class="fas fa-sliders-h"></i>预测参数设置</h2>

    <div class="input-section">
      <!-- 文件上传区域 -->
      <div class="input-group">
        <label class="input-label"><i class="fas fa-file-csv"></i>数据源文件</label>
        <div class="file-input-container">
          <label class="file-input-label">
            <i class="fas fa-cloud-upload-alt"></i>
            <span>点击或拖拽文件到此处</span>
            <div>支持CSV格式数据文件</div>
            <div id="selected-file-name">未选择文件</div>
          </label>
          <input type="file" id="csv-file" accept=".csv">
        </div>
      </div>

      <!-- 时间选择区域 -->
      <div class="input-group">
        <label class="input-label"><i class="fas fa-clock"></i>预测时间范围</label>
        <div class="time-inputs">
          <div class="input-control">
            <i class="fas fa-hourglass-start"></i>
            <input type="number" id="start-hour" min="0" max="23" placeholder="起始时间 (0-23)">
          </div>
          <div class="input-control">
            <i class="fas fa-hourglass-end"></i>
            <input type="number" id="end-hour" min="0" max="23" placeholder="终止时间 (0-23)">
          </div>
        </div>
      </div>
    </div>

    <!-- 预测按钮 -->
    <button id="predict-btn" class="btn-primary">
      <i class="fas fa-chart-line"></i> 生成能源预测
    </button>

    <!-- 加载指示器 -->
    <div id="loading-indicator" class="hidden">
      <div class="spinner"></div>
      <span>正在进行能源预测分析，请稍候...</span>
    </div>

    <!-- 错误消息 -->
    <div id="error-message" class="hidden"></div>
  </div>

  <!-- 结果展示区域 -->
  <div class="card">
    <h2 class="card-title"><i class="fas fa-chart-bar"></i>预测结果分析</h2>

    <div class="chart-container">
      <!-- 预测图表 -->
      <div class="chart-box">
        <div class="chart-header">
          <div>
            <div class="chart-title">能源需求预测</div>
            <div class="chart-description">实际值与预测值对比分析</div>
          </div>
        </div>
        <div class="chart-wrapper">
          <div id="forecast-chart"></div>
          <div class="chart-resize-handle"><i class="fas fa-expand-alt"></i></div>
        </div>
      </div>

      <!-- 组件图表 -->
      <div class="chart-box">
        <div class="chart-header">
          <div>
            <div class="chart-title">预测组件分解</div>
            <div class="chart-description">趋势、季节性和残差分析</div>
          </div>
        </div>
        <div class="chart-wrapper">
          <div id="components-chart"></div>
          <div class="chart-resize-handle"><i class="fas fa-expand-alt"></i></div>
        </div>
      </div>
    </div>

    <!-- 范围控制区域 (修复ID) -->
    <div id="range-controls" class="range-controls-section hidden">
      <div class="date-range-picker">
        <span class="date-range-label">时间范围控制：</span>
        <input type="text" id="range-start" class="date-input" placeholder="开始日期">
        <span>至</span>
        <input type="text" id="range-end" class="date-input" placeholder="结束日期">
        <button id="apply-range" class="btn-secondary">应用范围</button>
        <button id="reset-range" class="btn-secondary">重置视图</button>
      </div>

      <div class="slider-container">
        <div class="slider-header">
          <span>详细范围调整</span>
          <span>拖动滑块选择时间范围</span>
        </div>
        <div id="range-slider"></div>
      </div>
    </div>
  </div>

  <!-- 页脚 -->
  <div class="footer">
    <p>海岛能源调度平台 © 2025 | 基于时间序列分析的能源需求预测系统</p>
  </div>
</div>

<!-- 加载原有的JavaScript文件 -->
<script src="/js/app.js"></script>
<script src="/js/forecast.js"></script>

<script>
  // 文件选择显示
  document.getElementById('csv-file').addEventListener('change', function() {
    const fileName = this.files[0]?.name || '';
    document.getElementById('selected-file-name').textContent = fileName || '未选择文件';
  });

  // 初始化日期选择器
  $(function() {
    $("#range-start, #range-end").datepicker({
      dateFormat: 'yy-mm-dd'
    });
  });
</script>
</body>
</html>